<template>
	<view>
		<u-tabs :list="list" :is-scroll="false" :current="query.status" @change="change" active-color='#FF6B35'>
		</u-tabs>
		<u-empty text="暂无订单" mode="list" v-if='orderList.length<1'></u-empty>
		<view class="mr30 mt30 ml30 radius16 bg-f padding30" @click="$jump('/pages/my/orderD?order_id='+item.id)" v-else
			v-for="(item,i) in orderList" :key='i'>
			<view class="fs26 flex row-between">
				<text>订单号：{{item.order_sn}}</text>
				<text class="color-y7 fw-500">{{item.status|orderStatus}}</text>
			</view>
			<!-- 商品信息 -->
			<view class="pb20 u-border-bottom mt20 flex fs24">
				<image
					:src="item.goods.img"
					class="w112 h112 radius10 mr20"></image>
				<view class="flex1 flex row-column row-between u-line-1">
					<view class="u-line-1 fw-500">{{item.goods.name}}</view>
					<view class="flex row-between">
						<text class="fw-500">¥{{item.goods.price}}</text>
						<text class="color9">x{{item.num}}</text>
					</view>
				</view>
			</view>
			<!-- //商品信息 -->

			<view class="flex row-between mt30">
				<view class="">总价：¥{{item.total_amount}}</view>
				<view class="flex col-center row-around">
					<u-button shape="circle" size="mini" class="mr30"
						style="width: 144rpx;height: 56rpx; font-size: 24rpx;" v-if="item.status==0" @click.stop="delOrder(item.id)">取消订单</u-button>
					<u-button type="primary" shape="circle" size="mini"
						style="width: 144rpx;height: 56rpx; font-size: 24rpx;" v-if="item.status==0" @click.stop="gotopay(item)">去支付</u-button>
	<!-- 				<u-button type="primary" shape="circle" size="mini"
						style="width: 144rpx;height: 56rpx; font-size: 24rpx;border: 2rpx solid #FF6B35;background-color: #FFFFFF; color:#FF6B35 ;">查看详情</u-button> -->
					<u-button type="primary" shape="circle" size="mini"
						style="width: 144rpx;height: 56rpx; font-size: 24rpx;" v-if="item.status==4" @click.stop="confirm(item.id)">确认收货</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(opt) {
			this.query.status = opt.id
		},
		onShow() {
			this.getOrder_list()
		},
		data() {
			return {
				list: [{
					id: 0,
					name: '全部'
				}, {
					id: 1,
					name: '待付款'
				}, {
					id: 2,
					name: '待发货',
				}, {
					id: 3,
					name: '待收货'
				}, {
					id: 4,
					name: '已完成',
				}],
				current: 0,
				query: {
					page: 1,
					size: 20,
					status: 0
				},
				orderList: [],
				//数据总数
				total: ''
			};
		},
		methods: {
			getOrder_list(cd) {
				this.$api.order_list(this.query).then(res => {
					this.total = res.data.total
					cd ? this.orderList = [...this.orderList, ...res.data.data] : this.orderList = res.data.data
				})
			},
			change(index) {
				this.query.status = index;
				this.query.page = 1
				this.getOrder_list()
			},
			//去支付
			gotopay(item) {
				this.$jump('/pages/home/submitOrder?from=1')
				uni.setStorageSync('order',item)
			},
			//确认收货
			confirm(id) {
				this.$api.take_delivery({order_id:id}).then(res=>{
					this.$msg(res.msg)
					this.query.page=1
					this.getOrder_list()
				})
			},
			//取消订单
			delOrder(id) {
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确认取消订单么?',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							that.$api.cancel_order({order_id:id}).then(res=>{
								that.$msg(res.msg)
								that.query.page=1
								that.getOrder_list()
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			}
		},
		onReachBottom() {
			if (this.total > this.orderList.length) {
				this.query.page++
				this.getOrder_list('cd')
			} else {
				this.$msg('暂无更多订单数据')
			}
		}
	}
</script>

<style lang="scss">

</style>
